<template>
	<view class="uiwu" :style="{'background-image':`url(${uiwu.imgUrl}yuandian.png)`}">
		<uiwu-tab-header :is_see="is_see" />
		<view class="uiwu-scroll">
			<scroll-view scroll-x>
				<view class="uiwu-scroll-list uiwu-flex-align">
					<view 
						class="item" 
						:class="ActiveIndex == item.id ? 'active' : ''" 
						v-for="(item,index) in menuTablist" 
						:key="index"
						@tap="swiperTab(item)"
					>
						{{item.cate_name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="uiwu-border"></view>
		<view class="uiwu-banner">
			<view class="uiwu-banner-box">
				<view class="swiper">
					<swiper :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-for="(item,index) in banner" :key="index">
							<image :src="item.image" mode="widthFix"></image>
						</swiper-item>
					</swiper>
					<view class="swiper-dots uiwu-flex-align">
						<text v-for="(item,index) in banner" :key="index"></text>
					</view>
				</view>
				<view class="gard uiwu-flex-align">
					<view class="gard-list uiwu-flex-space">
						<view 
							class="item" 
							v-for="(item,index) in randomGoodslist" 
							:key="index"
							@tap.stop="uiwu.openWindow( item.bind_device_num > 1 ? `/pages/index/more?id=${item.device_ids}` : `/pages/index/detail?id=${item.device_ids}`)"
						>
							<image :src="item.image" mode="aspectFill"></image>
						</view>
					</view>
					<view @tap="getProductrandlist" class="gard-btn uiwu-flex-column uiwu-flex-center">
						<image src="/static/qiehuanbtn.png" mode="widthFix"></image>
						<text>换一批</text>
					</view>
				</view>
			</view>
		</view>
		<view class="uiwu-goods">
			<view class="uiwu-goods-list">
				<uiwu-list :loading="more">
					<view class="uiwu-flex uiwu-flex-space" style="flex-wrap: wrap;">
						<view 
							class="uiwu-goods-list-item" 
							@tap.stop="uiwu.openWindow( item.bind_device_num > 1 ? `/pages/index/more?id=${item.id}` : `/pages/index/detail?id=${item.device_ids}`)" 
							v-for="(item,index) in listData" 
							:key="index"
						>
							<view class="top">
								<image :src="item.image" mode="aspectFill"></image>
								<view class="taglabel" v-if="item.floors_sill > 0 && item.is_floors">{{item.floors_sill}}包夹</view>
								<view class="price uiwu-flex-space">
									<image src="/static/jinbi.png" mode="widthFix" style="width: 32rpx;"></image>
									<text>X{{item.gold}}</text>
									<view class="btn uiwu-flex-center">GO</view>
								</view>
							</view>
							<view class="goods-name uiwu-hidden2">{{item.store_name}}</view>
						</view>
					</view>
				</uiwu-list>
			</view>
		</view>
		<uiwu-tabBar :cuont="0" />
		<uiwu-popup v-model="showPopup">
			<view v-if="poplist.length" style="width: 100%;height: 100%;" class="uiwu-flex-center uiwu-flex-column">
				<view @tap.stop style="justify-content: flex-end;width: 100%;padding-right: 15%;" class="uiwu-flex">
					<uiwu-icon @click="closePopup" type="closeempty" size="24" color="#FFF" />
				</view>
				<image @tap.stop="openPopup" :src="poplist[popindex].image" mode="widthFix" style="width: 70%;"></image>
			</view>
		</uiwu-popup>
	</view>
</template>

<script setup lang="ts">
	import { onLoad , onReachBottom } from '@dcloudio/uni-app';
	import { inject, ref } from 'vue';
	import { bannerList, productlist, productrandlist , categoryIndex , messageIsNew , getAdPopup } from '@/api/api';
	const uiwu = inject<any>('uiwu');
	const banner = ref([])
	const ActiveIndex = ref<number>(0);
	const is_see = ref(0)
	const showPopup = ref(true)
	const poplist = ref([]);
	const popindex = ref(0)
	interface TabData {
		cate_name:string,
		id:number | string
	}
	const menuTablist = ref<Array<TabData>>([{
		cate_name:'每日推荐',
		id:0
	}])
	const randomGoodslist = ref<Array>([])
	const listData = ref<Array<object>>([])
	const pageNum = ref<number>(1)
	const more = ref<string>('loading');
	const isLock = ref<boolean>(true)
	const closePopup = () => {
		if(popindex.value == poplist.value.length - 1) return showPopup.value = false
		popindex.value++
	}
	const openPopup = () : void => {
		const {is_tab,path} = poplist.value[popindex.value];
		if(is_tab) uni.switchTab({
			url:path
		})
		if(!is_tab) uni.navigateTo({
			url:path
		})
		showPopup.value = false
	}
	const getAdPopupFun = async () : Promise<any> => {
		const {data} = await getAdPopup();
		if(data.length) showPopup.value = true
		poplist.value = data
	}
	/**
	 * swiperTab 切换分类
	 */
	const swiperTab = (item:object) : void => {
		ActiveIndex.value = item.id
		getProductlist()
	}
	/**
	 * getcategoryIndex 获取分类数据
	 */
	const getcategoryIndex = async () : Promise<any> => {
		const {data} = await categoryIndex();
		menuTablist.value.push(...data)
	}
	/**
	 * getBannerlist 获取首页轮播图
	 */
	const getBannerlist = async () : Promise<any> => {
		const {data} = await bannerList();
		banner.value = data
	}
	/**
	 * getProductrandlist 获取随机列表奖品
	 */
	const getProductrandlist = async () : Promise<any> => {
		randomGoodslist.value = []
		const {data} = await productrandlist()
		randomGoodslist.value = data
	} 
	/**
	 * getProductlist 获取奖品列表
	 */
	const getProductlist = async (mack:boolean=false) : Promise<any> => {
		if(!mack) pageNum.value = 1
		const { data:{data , total}} = await productlist({
			cate_id:ActiveIndex.value,
			page:pageNum.value
		});
		isLock.value = true
		uiwu.setlist({
			isMore:mack,
			listData,
			total,
			listRow:data,
			more,
			pageNum
		})
	}
	const getmessageIsNew = async () => {
		const {data} = await messageIsNew()
		is_see.value = data.is_see
	}
	onReachBottom(()=>{
		if(!isLock.value) return
		isLock.value = false
		pageNum.value++
		more.value = 'loading'
		getProductlist(true)
	})
	onLoad(()=>{
		getmessageIsNew()
		getcategoryIndex()
		getBannerlist()
		getProductrandlist()
		getProductlist()
		getAdPopupFun()
	})
</script>

<style lang="scss">
	// page{
	// 	background: url('../../static/yuandian.png') no-repeat 0 0 #FDD134;
	// 	background-size: 100% 100%;
	// 	padding-bottom: 22rpx;
	// }
	.uiwu{
		background-repeat: no-repeat;
		background-position: 0 0;
		background-color: #FDD134;
		padding-bottom: 22rpx;
		background-size: 100% 100%;
	}
	.uiwu-scroll{
		background-color: #272323;
		width: 100%;
		height: 82rpx;
		&-list{
			padding-left: 20rpx;
			height: 82rpx;
			.item{
				margin-right: 32rpx;
				flex-shrink: 0;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				height: 55rpx;
				line-height: 55rpx;
				&.active{
					text-align: center;
					width: 176rpx;
					background: url('../../static/indextab.png') no-repeat 0 0;
					background-size: 100% 100%;
					font-size: 32rpx;
					font-family: PingFang SC-Heavy, PingFang SC;
					font-weight: 800;
					color: #FFFFFF;
					line-height: inherit;
					text-shadow: 0px 4rpx 0rpx #231815;
				}
			}
		}
	}
	.uiwu-border{
		width: 100%;
		height: 6rpx;
		background: #EF821E;
	}
	.uiwu-banner{
		padding: 14rpx 15rpx 0;
		&-box{
			width: 100%;
			height: 628rpx;
			background: url('../../static/indexbanner.png') no-repeat 0 0;
			background-size: 100% 100%;
			padding: 0 12rpx;
			.swiper{
				padding:12rpx 0;
				swiper{
					width: 100%;
					height: 298rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				&-dots{
					width: 100%;
					height: 46rpx;
					padding: 0 30rpx;
					text{
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						margin-right: 10rpx;
						&:nth-child(1){
							background-color: #6BD938;
						}
						&:nth-child(2){
							background-color: #FAC500;
						}
						&:nth-child(3){
							background-color: #FCE5C7;
						}
						&:nth-child(4){
							background-color: #6BD938;
						}
						&:nth-child(5){
							background-color: #FAC500;
						}
						&:nth-child(6){
							background-color: #FCE5C7;
						}
					}
				}
			}
			.gard{
				width: 100%;
				margin-top: 42rpx;
				&-list{
					flex: 1;
					height: 208rpx;
					padding: 12rpx;
					background: url('../../static/gardbgs.png') no-repeat 0 0;
					background-size: 100% 100%;
					.item{
						width: 184rpx;
						height: 184rpx;
						image{
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}
					}
				}
				&-btn{
					margin: 0 22rpx;
					image{
						width: 64rpx;
					}
					text{
						font-size: 20rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
		}
	}
	.uiwu-goods{
		margin-top: 20rpx;
		padding: 0 15rpx;
		&-list{
			// background: url('../../static/goodsbg.png') no-repeat 0 0;
			background-size: 100% 100%;
			padding: 16rpx;
			flex-wrap: wrap;
			justify-content: space-between;
			border: 6rpx solid #231815;
			border-radius: 30rpx;
			background-color: #fff;
			&-item{
				width: 330rpx;
				margin-bottom: 32rpx;
				min-height: 410rpx;
				.top{
					background: #FCE5C7;
					width: 330rpx;
					height: 330rpx;
					border-radius: 16rpx;
					padding: 11rpx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}
					.taglabel{
						width: 114rpx;
						height: 42rpx;
						position: absolute;
						right: 21rpx;
						top: 21rpx;
						z-index: 9;
						background: url('../../static/guigebg.png') no-repeat 0 0;
						background-size: 100% 100%;
						font-size: 22rpx;
						font-weight: 500;
						color: #FFFFFF;
						text-align: center;
						line-height: 44rpx;
					}
					.price{
						position: absolute;
						z-index: 9;
						left: 11rpx;
						right: 11rpx;
						bottom: 11rpx;
						height: 50rpx;
						background: rgba(#000,0.6);
						border-radius: 0px 0px 8rpx 8rpx;
						padding: 0 9rpx;
						text{
							flex: 1;
							font-size: 20rpx;
							font-weight: 500;
							color: #FFFFFF;
							margin-left: 6rpx;
						}
						.btn{
							width: 80rpx;
							height: 36rpx;
							background: linear-gradient(180deg, #8DC21F 0%, #5BB431 100%);
							border-radius: 19rpx;
							font-size: 20rpx;
							font-weight: 500;
							color: #FFFFFF;
							padding-right: 10rpx;
							line-height: 1;
							&::before{
								content: "";
								display: block;
								width: 12rpx;
								height: 12rpx;
								box-shadow: 0px 3rpx 6rpx 1rpx rgba(90,135,0,0.5);
								border: 2rpx solid #FFFFFF;
								border-radius: 50%;
								margin-right: 10rpx;
								box-sizing: border-box;
							}
						}
					}
				}
				.goods-name{
					font-size: 30rpx;
					font-weight: bold;
					color: #231815;
				}
			}
		}
	}
</style>
